<template>
	<view class="bg-white" style="min-height: 100vh;">
		<cu-custom :title="title" rightIcon="search" @rightClick="rightClick"></cu-custom>

		<u-sticky offset-top="0" :customNavHeight="44" bgColor="#fff">
			<view class="flex align-start padding-top-sm" style="height: 90rpx; overflow: hidden;">
				<view class="padding-lr" style="flex: 0 0 650rpx; width: 650rpx;">
					<u-scroll-list indicatorWidth="0">
						<view class="flex align-center margin-right-sm padding-lr-sm padding-tb-xs bg-gray radius text-sm"
							v-for="(item, index) in selectList" :key="index" style="white-space:nowrap;">
							<text class="margin-right-xs">{{item.name}}</text>
							<u-icon name="arrow-down-fill" color="#999" size="24rpx"></u-icon>
						</view>
					</u-scroll-list>
				</view>
				<view @tap="rightClick" class="flex align-center flex-sub text-sm margin-top-xs">
					<text class="margin-right-xs">更多</text>
					<u--image :showLoading="true" radius="0" src="/static/images/ico/filter.png" width="25rpx"
						height="25rpx">
					</u--image>
				</view>
			</view>

		</u-sticky>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
			<!-- 课程列表 -->
			<view @tap="$routerGo('/pages/mechanism/index')" class="padding solid-bottom" v-for="(item,index) in 3"
				:key="index">
				<view class="flex align-center">
					<u--image :showLoading="true" radius="10rpx"
						:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="160rpx" height="160rpx">
					</u--image>
					<view class="flex-sub margin-left-sm">
						<view class="flex">
							<view class="text-cut text-lg text-bold" style="flex: 0 0 380rpx; width: 380rpx;">
								凡尔赛钢琴大师</view>
							<view class="margin-left">
								<u-icon name="more-dot-fill" color="#999999"></u-icon>
							</view>
						</view>

						<view class="margin-top-xs flex align-center">
							<view class="text-red padding-right">评价：5.0</view>
							<view class="padding-left solid-left">
								销量：150
							</view>
						</view>

						<view class="flex flex-between margin-top-sm">
							<view class="flex align-center">
								<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
								<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
									青秀区秦汉胡同国学书院3栋108室
								</view>
							</view>
							<text class="margin-left-sm">
								42.2KM
							</text>
						</view>
					</view>
				</view>

				<view class="flex align-center margin-top-sm">
					<view class="text-center" style="flex: 0 0 160rpx">
						<view class="text-red text-bold">
							￥1
						</view>
						<view class="text-sm text-gray">
							门市价:￥9.9
						</view>
					</view>
					<view class="margin-left-sm">
						<view class="text-black text-lg text-cut" style="width: 450rpx;">
							成人/少儿钢琴1对1体验课
						</view>
						<view class="text-gray text-sm">
							年售卖20
						</view>
					</view>
				</view>
				<view class="flex align-center margin-top-sm">
					<view class="text-center" style="flex: 0 0 160rpx">
						<view class="text-red text-bold">
							￥209
						</view>
						<view class="text-sm text-gray">
							门市价:￥9999
						</view>
					</view>
					<view class="margin-left-sm">
						<view class="text-black text-lg text-cut" style="width: 450rpx;">
							成人/少儿钢琴1对1体验课成人/少儿钢琴1对1体验课
						</view>
						<view class="text-gray text-sm">
							年售卖20
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无内容 -->
			<u-empty v-if="false" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</mescroll-body>

		<!-- 筛选弹窗 -->
		<u-popup :show="screenShow" @close="screenClose" mode="right" safeAreaInsetTop>
			<view class="padding-tb padding-left flex flex-direction" style="width: 550rpx; min-height: 100vh;">
				<view style="flex: auto">
					<view class="text-lg margin-top-lg">
						考过科目
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in kmList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>

					<view class="text-lg margin-top-lg">
						学段
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in xdList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>

					<view class="text-lg margin-top-lg">
						排列方式（单选）
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in plList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="plIndex == index ? plIndex = null : plIndex = index"
								:plain="plIndex == index" type="primary" :text="item.name"
								:color="plIndex == index ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: plIndex == index ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>
				</view>


				<view class="flex-shrink flex padding-right">
					<u-button @click="resetting" color="#f8f8f8" type="primary" text="重置"
						:customStyle="{color: '#666'}">
					</u-button>

					<u-button @click="submit" class="margin-left" color="#ea3457" type="primary" text="确定">
					</u-button>
				</view>
			</view>
		</u-popup>

		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				searchword: '', //搜索关键字
				list: [],
				// 上拉加载的配置(可选)
				upOption: {
					use: true, //是否启用上拉加载
				},

				selectList: [{
						name: '广源国际社区'
					},
					{
						name: '排序'
					},
					{
						name: '团购'
					},
					{
						name: '点评高分'
					}
				],

				title: '',

				//筛选
				screenShow: false, //是否显示
				//考过科目
				kmIndex: [],
				kmList: [{
						name: '语文',
						isSelect: false
					},
					{
						name: '数学',
						isSelect: false
					},
					{
						name: '英语',
						isSelect: false
					},
					{
						name: '物理',
						isSelect: false
					},
					{
						name: '化学',
						isSelect: false
					},
					{
						name: '生物',
						isSelect: false
					},
					{
						name: '政治',
						isSelect: false
					},
					{
						name: '历史',
						isSelect: false
					},
					{
						name: '地理',
						isSelect: false
					}
				],

				//学段
				xdIndex: [],
				xdList: [{
						name: '高中',
						isSelect: false
					},
					{
						name: '初中',
						isSelect: false
					},
					{
						name: '小学',
						isSelect: false
					}
				],
				//排列方式
				plIndex: 0,
				plList: [{
						name: '按距离'
					},
					{
						name: '按人气'
					},
					{
						name: '按活跃度'
					}
				]
			}
		},
		onLoad(e) {
			this.title = e.name
		},
		onShow() {


		},
		methods: {
			//筛选弹窗
			rightClick() {
				this.screenShow = true
			},
			//关闭筛选弹窗
			screenClose() {
				this.screenShow = false
			},

			// 重置
			resetting() {
				this.plIndex = 0
				this.kmList.forEach(item => {
					item.isSelect = false
				})
				this.xdList.forEach(item => {
					item.isSelect = false
				})
			},

			//确认搜索
			submit() {
				this.screenClose()
			},

			routerGoTo(item) {
				uni.setStorageSync('workCenterItem', item)
				this.$routerGo(`/pages/index/detailed?no=${item.no}`)
			},
			//获取商品列表
			getList(page) {
				const params = {
					currentPage: page,
					pageSize: 20,
					searchword: this.searchword
				}
				this.$http.post('/api/Users/GetCBFBusiness', params).then(res => {

					if (page == 1) this.list = []; //如果是第一页需手动置空列表

					this.list = [...this.list, ...res.list] //合并数据

					setTimeout(() => {
						this.mescroll.endBySize(res.list.length, res.pageTotal); // 请求成功,隐藏加载状态
					}, 400)
				}).catch(() => {
					this.mescroll.endErr(); // 请求失败,隐藏加载状态
				})
			},

			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-tap {
		width: 110rpx;
		height: 36rpx;
		background-image: url('/static/images/ico/tag-2.png');
		background-size: 100% 100%;
		flex: 0 0 110rpx;
	}
</style>
